<template>
    <div class="upfile_main">
        <div class="upfile-img-box" @click="funss" v-if="$slots.default" >
            <slot></slot>
        </div>
        <el-upload
            action="#"
            ref="file"
            list-type="picture-card"
            :auto-upload="false"
            :file-list="imageUrls"
            :on-preview="handlePictureCardPreview"
            :on-change="addExplain"
            :on-exceed="handleExceed"
            :on-remove="remove"
            :limit=1

            drap
        >
        <i slot="default" class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <el-dialog width="50%" :visible.sync="dialogVisibles">
            <div class="upfile-img-show">
                <slot></slot>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    export default{
        props:{
            limit:{
                default:1
            },
            callback:{
                type:Function,
                default:function(){
                }
            },
            file_config:{
                type:Object,
                default:function () {
                    return {}
                }
            }
        },
        data(){
            return {
                imageUrls:[],
                arr:[],
                dialogImageUrl:"",
                dialogVisible:false,
                dialogVisibles:false,
                imgAddr:"",
            }
        },
        methods:{
            handlePictureCardPreview(file){
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            addExplain(file,files){
                console.log(file, files);
                let s = false;
                console.log(file,files,1)
                this.arr=[]
                const fileSize = file.size / 1024 / 1024;
                if(fileSize > 1){
                    this.$message({
                        message: "上传文件大小不能超过1M",
                        type: "warning",
                    })
                    this.$refs['file'].clearFiles();
                    return;
                }
                files.forEach((item,index)=>{
                    let type_list=["image/png","image/jpeg","image/jpg"]//,
                    if(type_list.indexOf(item.raw.type)>-1){
                        this.arr.push(item.raw)
                    }
                    else{
                        this.$message({
                            type:"error",
                            message:"请上传jpg,png格式的图片"
                        })
                        this.$refs['file'].clearFiles();
                        return;
                    }
                })
                if(this.arr.length>0){
                    this.imageUrls=files
                    this.callback(this.arr,this.file_config)
                }else{
                    this.imageUrls=[]
                    this.callback(this.arr,this.file_config)
                }
                 if(Object.keys(this.file_config).length >0){
                     this.$nextTick(()=>{
                         this.$refs.file.clearFiles();
                     })
                 }
            },
            remove(files){
                this.arr = []
                this.callback(this.arr,this.file_config)
            },
            funss(){
                this.dialogVisibles = true;
            },
            handleExceed(files, fileList) {
                this.$message.error("请先删除已有的文件再上传");
            },
        },
    }
</script>

<style lang="less" scoped>
/* 上传一张图片后不再上传 */
 ul.el-upload-list.el-upload-list--picture-card+div{
display: none;
}
  ul.el-upload-list.el-upload-list--picture-card:empty+div{
display: inline-block;
}
.upfile-img-box{
    margin-right: 10px;
    width: 160px;
    height: 150px;
    cursor: pointer;
}
.upfile-img-box img{
    width: 110px;
    height: 100%;
}
/* img{
    width: 110px;
    height: 100%;
} */
.upfile_main{
    display:flex
}
.upfile-img-show{
    display: flex;
    justify-content: center;
    align-items: center;

}

</style>
<style >

   .upfile_main img{
        width:100%;
    }
</style>